<template>
  <div class="login">
    <h1>忘记密码</h1> 
    <p class="phone_con"><label>手机号：</label><input type="text" v-model="phone" placeholder="请输入用户名"><span @click="getnum" class="code fr">{{inner}}</span></p>
    <p><label>验证码：</label><input v-model="code" type="text" placeholder="请输入验证码"></p>
     <p><label>新密码：</label><input v-model="newpsw" type="password" placeholder="请输入新密码"></p>
    <!-- <a href="{path:'index'}">登录</a> -->
    <p><button  @click="nice" class="btn">确定</button></p>
   </div>
</template>

<script>
export default {
  name: "forgetpws",
  data() {
    return {
      msg: "这里离是忘记密码页面",
      phone: "",
      code: "",
      newpsw: "",
      inner: "获取验证码",
      gocodeb: true
    };
  },
  methods: {
    getnum() {
      let t = 60;
      if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)) {
        this.$layer.alert("手机号码不正确");
        return false;
      }
      var _this = this;
      if (this.gocodeb) {
        // let params = new URLSearchParams();
        // params.append("phone", this.phone);
        //  params.append("forget", 1);
        //开始获取
        this.$http
          .post(
            "http://medical.qingguo188.com/user/sendsms",
            {
              phone: arr.this.phone,
              forget: 1
            },
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(
            rester => {
              console.log(rester.data);
              if (rester.data.status == 0) {
                this.$layer.msg("该用户不存在！");
                return false;
              } else {
                this.$layer.msg("发送成功");
              }

              _this.gocodeb = false; //禁止请求过程中单机按钮
              var timer = setInterval(function() {
                t--;
                if (t == 0) {
                  _this.inner = "获取验证码";
                  _this.gocodeb = true;
                  clearInterval(timer);
                } else {
                  _this.inner = t + "s";
                }
              }, 1000);
              //this.$router.push({ path: "index" }); //登录成功跳转页面
            },
            function() {
              this.$layer.alert("网络错误！");
            }
          );
      }
    },
    nice() {
      //alert(0)
      if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)) {
        this.$layer.alert("手机号码不合法");
        return false;
      }

      if (this.code == "") {
        this.$layer.alert("验证码不能为空！");
        return false;
      }
      if (this.newpsw == "" || this.newpsw.length < 6) {
        this.$layer.alert("最少输入6位新密码！");
        return false;
      }
      // let params = new URLSearchParams();
      //   params.append("phone", this.phone);
      //    params.append("code", this.code);
      //     params.append("password", this.newpsw);
      this.$http
        .post(
          "http://medical.qingguo188.com/user/forgetpassword",
          {
            phone: arr.this.phone,
            code: this.code,
             password: this.newpsw

          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            console.log(rester.data.status);
            if (rester.data.status == 0) {
              this.$layer.alert("修改失败");
            } else {
              this.$layer.alert("修改成功！");
            }
            //this.$router.push({ path: "index" }); //登录成功跳转页面
          },
          function() {
            this.$layer.alert("网络错误！");
          }
        );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.phone_con {
  position: relative;
}
.code {
  position: absolute;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  border-radius: 5px;
  background: orangered;
  margin-left: 10px;
  color: #ffffff;
  cursor: pointer;
  right: 0;
}
h1 {
  text-align: center;
  line-height: 2;
  font-size: 24px;
}
p {
  text-align: center;
  margin-top: 20px;
}
.forgetpaw {
  color: #008df6;
  margin-top: 10px;
  margin-right: 100px;
  cursor: pointer;
}
body {
  color: #f1f1f1;
}
.login {
  width: 500px;

  position: relative;
  border: 1px solid #dedede;
  left: 50%;
  top: 200px;
  margin-left: -250px;
  padding: 20px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: center;
}
</style>
